<template>
  <div style="padding: 10px">
    <a-form>
      <a-row :gutter="16">
        <a-col :span="6">
          <a-form-item label="用户姓名">
            <a-input allow-clear v-model="state.sd.searchName" placeholder="请输入用户姓名" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-space>
            <a-button type="primary" @click="searchUser">
              <template #icon><icon-search /></template>查询
            </a-button>
            <a-button type="primary" @click="addUser">
              <template #icon><icon-plus-circle /></template>添加
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>

    <a-table :bordered="{cell:true}" :pagination="false" stripe :data="state.userObj.list">
      <template #columns>
        <a-table-column title="用户名" data-index="username"></a-table-column>
        <a-table-column title="用户姓名" data-index="name"></a-table-column>
        <a-table-column title="企业微信" data-index="wxuid"></a-table-column>
        <a-table-column title="手机号" data-index="phone"></a-table-column>
        <a-table-column title="操作" width="220">
          <template #cell="{ record }">
            <a-space>
              <a-button type="primary" size="small" @click="editUser(record.id)"><template #icon><icon-edit /></template>修改</a-button>
              <a-button type="primary" size="small" @click="setUserRole(record.id)"><template #icon><icon-settings /></template>角色设定</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <a-pagination class="mt10" show-total :total="state.userObj.total" @change="loadUser" @page-size-change="loadUser" v-model:current="state.sd.pageNum" v-model:page-size="state.sd.pageSize"></a-pagination>

    <a-modal :title="state.popupTitle" v-model:visible="state.entityDetailVisible" :footer="false">
      <UserDetail v-if="state.entityDetailVisible" v-model="state.entityDetailVisible" :entityId="state.popupEntityId" :orgId="props.orgId"></UserDetail>
    </a-modal>
    <a-modal :title="state.popupTitle" v-model:visible="state.userRoleVisible" :footer="false">
      <UserRole v-if="state.userRoleVisible" v-model="state.userRoleVisible" :entityId="state.popupEntityId" :orgId="props.orgId"></UserRole>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import mittBus from "@/utils/route-listener"
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent} from "vue";
// 引入组件
const UserDetail = defineAsyncComponent(() => import('@/views/sys/user/userDetail.vue'));
const UserRole = defineAsyncComponent(() => import('@/views/sys/user/userRole.vue'));

let props = defineProps({
  orgId : {type : Number, default: 0}
})
const state = reactive({
  sd: {
    searchName : '',
    orgId: props.orgId,
    pageNum: 1,
    pageSize: 15
  },
  userObj: {},

  entityDetailVisible : false,
  popupTitle : '',
  popupEntityId : 0,

  userRoleVisible : false,
})
const searchUser = ()=>{
  state.sd.pageNum = 1;
  loadUser();
}
const loadUser = ()=>{
  if(props.orgId !== 0){
    axios.post('/sys/useradmin/pageorguser', state.sd).then(res => {
      const { data } = res
      state.userObj = data
    })
  }else {
    axios.post( '/sys/useradmin/pageuser', state.sd).then(res => {
      const { data } = res
      state.userObj = data
    })
  }
}
const addUser = ()=>{
  state.popupEntityId = 0;
  state.popupTitle= "新增用户"
  state.entityDetailVisible= true
}
const editUser = (id)=>{
  state.popupEntityId = id;
  state.popupTitle= "修改用户"
  state.entityDetailVisible= true
}
const setUserRole = (id)=>{
  state.popupEntityId = id;
  state.popupTitle= "用户角色"
  state.userRoleVisible= true
}

onMounted(()=>{
  loadUser();
  mittBus.on("useradd", ()=>{
    state.sd.pageNum = 1;
    loadUser();
  })
  mittBus.on("useredit", ()=>{
    loadUser();
  })
})
onUnmounted(()=>{
  mittBus.off("useradd", ()=>{})
  mittBus.off("useredit",()=>{})
})
</script>

<style scoped>

</style>
